import React, {Component} from "react";

import rest from "../../../assets/config/rest";

class GraphicImage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            width: this.props.width,
            height: this.props.height,
            top: !!this.props.top ? this.props.top : 0,
            left: !!this.props.left ? this.props.left : 0,
            path: this.props.path,
        };
        this.commonMove = this.commonMove.bind(this);
        this.moveImg = this.moveImg.bind(this);
        this.touchMoveImg = this.touchMoveImg.bind(this);
    }

    componentWillUnmount() {
        this.setState = (state, callback) => {
            return;
        };
    }

    componentDidMount() {
        const {path} = this.props;
        this.refs.image.src = rest.graphic.fileUrl + path;
    }

    //这个函数太牛逼了
    moveImg(ev) {
        ev.preventDefault();
        const {drag, box} = this.props;
        if (drag) {
            const {top, left, width, height} = this.state;
            const {clientWidth, clientHeight} = box;
            let disx = ev.pageX - left;
            let disy = ev.pageY - top;
            let maxWidth = clientWidth - width;
            let maxHeight = clientHeight - height;
            document.onmousemove = (ev) => {
                this.commonMove(ev, disx, disy, maxWidth, maxHeight);
            };
            document.onmouseup = () => {
                document.onmousemove = null;
                document.onmousedown = null;
            };
        }
    }

    //这个函数太牛逼了
    touchMoveImg(ev) {
        ev.preventDefault();
        ev = ev.nativeEvent.changedTouches[0];
        const {drag, box} = this.props;
        if (drag) {
            const {top, left, width, height} = this.state;
            const {clientWidth, clientHeight} = box;
            let disx = ev.pageX - left;
            let disy = ev.pageY - top;
            let maxWidth = clientWidth - width;
            let maxHeight = clientHeight - height;
            document.ontouchmove = (ev) => {
                ev = ev.changedTouches[0];
                this.commonMove(ev, disx, disy, maxWidth, maxHeight);
            };
            document.ontouchend = () => {
                document.ontouchmove = null;
                document.ontouchstart = null;
            };
        }
    }

    commonMove(ev, disx, disy, maxWidth, maxHeight) {
        let left = 10 * parseInt((ev.pageX - disx) / 10);
        let top = 10 * parseInt((ev.pageY - disy) / 10);
        if (left < 0) {
            left = 0;
        }
        if (top < 0) {
            top = 0;
        }
        if (top > maxHeight) {
            top = maxHeight;
        }
        if (left > maxWidth) {
            left = maxWidth;
        }
        this.setState({
            left: left,
            top: top,
        });
    }

    render() {
        const {id, editable, text} = this.props;
        const {width, height, top, left} = this.state;
        return (
            <img
                id={id}
                ref="image"
                alt="img"
                style={{
                    width: width,
                    height: height,
                    top: top,
                    left: left,
                    cursor: "move",
                    position: "absolute",
                    zIndex: editable,
                }}
                editable={editable}
                onMouseDown={this.moveImg}
                onTouchStart={this.touchMoveImg}
                onWheel={this.changeSize}
                title={text}
            />
        );
    }
}

export default GraphicImage;
